<template>
  <div class="es-layout" @click.stop>
    <Header />
    <div class="es-header-toolbar">
      <div v-for="item in tools" class="es-tool-btn" @click="handleToolClick(item)">
        <el-button :icon="item.icon">{{ item.label }}</el-button>
      </div>
    </div>

    <ESEditor ref="editorRef" :data="data" theme="dark" />
  </div>
</template>

<script setup lang="ts">
import Header from './components/layout/Header.vue'
import { useAppStore } from '@/store/modules/app'
import { ESEditor, ToolType, EditorDataType } from '@es-drager/editor'
import { onMounted } from 'vue';
import { computed, ref } from 'vue'

//   const editorRef = ref<any>(null)
const editorRef = ref<any>(null)

const appStore = useAppStore();

// 初始数据
const data = ref<any>({
  container: {
    markline: {
      show: true,
      color: ''
    },
    snapToGrid: true,
    gridSize: 10,
    gridColor: '',
    style: {
      width: 2010,
      height: 1164
    },
    scaleRatio: 1,
  },
  elements: [
    {

      id: '1',
      component: 'ietaInput',
      width: 300,
      height: 50,
      left: 100,
      top: 100,
      text: '',
      labelWidth: 150, //
      style: {
        background: '#f5f5f5',
      },
      ename: 'bdfh',
      cname: '部队番号',
      datasourecs: '',
    },
    {
      id: '2',
      component: 'ietaDate',
      width: 300,
      height: 50,
      left: 410,
      top: 100,
      text: '',
      labelWidth: 150, //
      style: {
        background: '#f5f5f5',
        color: ''
      },
      ename: 'tbsj',
      cname: '填报时间',
    },
    {
      id: '3',
      component: 'ietaInput',
      width: 300,
      height: 50,
      left: 720,
      top: 100,
      text: '',
      labelWidth: 150, //
      style: {
        background: '#f5f5f5',
        color: ''
      },
      ename: 'zzzz',
      cname: '重中之重资产支持证券',
    }
  ]
})

const tools = computed(() => (editorRef.value as any)?.tools || [])

console.log(tools,  'tools');

function handleToolClick(item: any) {
  console.log(item, 'item');
  // console.log(JSON.parse(JSON.stringify(data)), 'data');
  
  if (typeof item.handler === 'function') {
    item.handler()
  }
}

onMounted(() => {
  console.log(editorRef.value)
})
</script>

<style lang="scss" scoped>
.es-layout {
  width: 100%;
  height: 100%;
  color: var(--es-color);
  background-color: var(--es-color-bg);
  transition: background-color 0.2s;
  min-width: 1118px;

  .es-header-toolbar {
    position: absolute;
    top: 10px;
    right: 10px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .es-tool-btn+.es-tool-btn {
      margin-left: 10px;
    }
  }
}
</style>